<template>
  <div class='container'>
    <el-card>
      <el-form :model="changePage">
        <el-row type="flex" justify="start">
          <el-col :span="20">
            <el-form-item label="关键字">
              <el-input style="width: 240px"
                        v-model="changePage.keyword"
                        placeholder="根据关键字搜索"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <el-button size="small" @click="clearSearch">清除</el-button>
              <el-button size="small" type="primary" @click="search(changePage)">搜索</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>

      <!--      提示框-->
      <el-alert type="info" :closable="false" style="heigth: 20px" show-icon
      >数据一共{{ count }}条
      </el-alert
      >
      <!--      表格-->
      <el-table
        :data="tableData"
        style="width: 100%;margin: 15px 0">
        <el-table-column
          prop="id"
          label="编号"
          width="190">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="100">
          <template v-slot="{row}">
            <span v-if="row.questionType === '1'">单选</span>
            <span v-else-if="row.questionType === '2'">多选</span>
            <span v-else>简单</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="questionIDs"
          label="项目编号">
          <template v-slot="{row}">
            <div v-for="(item,indx) in row.questionIDs" :key="indx">
              <p style="color: dodgerblue;cursor:pointer;" @click="questionsJump(item.id)">{{ item.number }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="addTime"
          label="录入时间">
        </el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题时间(S)">
        </el-table-column>
        <el-table-column
          prop="accuracyRate"
          label="正确率(%)">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="录入人">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作">
          <template v-slot="{row}">
            <el-button type="danger" icon="el-icon-delete" circle plain @click="removeQuestion(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页-->
      <el-row justify="end" style="margin-top: 20px" type="flex">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 15, 20]"
            :current-page="changePage.page"
            layout="prev, pager, next,sizes,jumper"
            :total="count">
          </el-pagination>
      </el-row>
    </el-card>
    <!--    预览弹窗-->
    <!-- 预览弹框 -->
    <el-dialog
      title="题目预览"
      :visible="showDialog"
      width="50%"
      @close="closeDialog"
    >
      <div style="border-bottom: 1px solid #333">
        <el-row>
          <el-col :span="6">
            <p v-if="previewStr.questionType==='1'">【题型】：单选题 </p>
            <p v-else-if="previewStr.questionType==='2'">【题型】：多选题</p>
            <p v-else>【题型】：简答题</p>
          </el-col>
          <el-col :span="6">
            <p>【编号】：{{ previewStr.id }}</p>
          </el-col>
          <el-col :span="6">
            <p>【难度】：{{ previewStr.difficulty |initDifficulty}}</p>
          </el-col>
          <el-col :span="6">
            <p>【标签】：{{ previewStr.tags }}</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <p>【学科】：{{ previewStr.subjectName }}</p>
          </el-col>
          <el-col :span="6">
            <p>【目录】：{{ previewStr.directoryName }}</p>
          </el-col>
          <el-col :span="6">
            <p>【方向】：{{ previewStr.direction }}</p>
          </el-col>
        </el-row>
      </div>
      <div style="border-bottom: 1px solid #333">
        <el-row> <p>【题干】：</p> </el-row>
        <el-row> <p>下列容器中是框架容器的是？</p> </el-row>
        <el-row>
          <p v-if="previewStr.questionType==='1'">单选题 选项：(以下选中的选项为正确答案)</p>
          <p v-else-if="previewStr.questionType==='2'">多选题 选项：(以下选中的选项为正确答案)</p>
          <p v-else>简答题 选项：(以下选中的选项为正确答案)</p>
        </el-row>
        <el-row v-for="v in previewStr.options" :key="v.id">
          <el-radio
            v-model="v.isRight"
            :label="true"
            style="margin: 7px 0"
          >
            {{ v.code }}：{{ v.title }}
          </el-radio>
        </el-row>
      </div>
      <div style="border-bottom: 1px solid #333">
        <el-row>
          <p>【参考答案】：<el-button type="danger">视频答案预览</el-button></p>
        </el-row>
      </div>
      <div style="border-bottom: 1px solid #333">
        <el-row>
          <p>【答案解析】：{{ previewStr.videoURL }}</p>
        </el-row>
      </div>

      <el-row>
        <p>【题目备注】：{{ previewStr.remarks }}</p></el-row
      >

      <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="showDialog = false"
      >关闭</el-button
      >
    </span>
    </el-dialog>
    <!-- /预览弹框 -->
  </div>
</template>

<script>
import { detail, randoms, removeRandoms } from '@/api/hmmm/questions'
import { Message } from 'element-ui'

export default {
  name: 'questionsNew',
  data () {
    return {
      // 表格数据
      tableData: [],
      //  总条数
      count: 0,
      //  切换页码/搜索时的参数
      changePage: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      //  预览弹窗
      showDialog: false,
      previewStr: {} // 弹窗数据
    }
  },
  created () {
    this.getQuestionsNew(this.changePage)
  },
  methods: {
    // 获取数据
    async getQuestionsNew (date) {
      const { data } = await randoms(date)
      this.tableData = data.items
      this.count = data.counts
      this.changePage.pages = data.pages
    },
    //  预览
    async questionsJump (id) {
      this.showDialog = true
      const { data } = await detail({ id })
      data.options.forEach((item) => {
        item.isRight = Boolean(item.isRight)
      })
      this.previewStr = data
      console.log(this.previewStr)
    },
    // 关闭预览
    closeDialog () {
      this.showDialog = false
    },
    // 搜索
    async search (date) {
      const { data } = await randoms(date)
      this.count = data.counts
      this.tableData = data.items
    },
    // 清除搜索
    clearSearch () {
      this.changePage.keyword = ''
      this.getQuestionsNew(this.changePage)
    },
    // 每页条数
    handleSizeChange (newSize) {
      this.changePage.pagesize = newSize
      this.getQuestionsNew(this.changePage)
    },
    // 当前页
    handleCurrentChange (newNum) {
      this.changePage.page = newNum
      this.getQuestionsNew(this.changePage)
    },
    //  删除数据
    async removeQuestion (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms({ id })
        await this.getQuestionsNew()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // try {
      //   await this.$confirm('确定要删除吗?', { type: 'warning' })
      //   await removeRandoms({ id })
      //   await this.getQuestionsNew()
      //   this.$message.success('删除成功')
      // } catch (e) {
      //   this.$message.info('取消删除')
      // }
    }
  }
}
</script>

<style scoped lang='less'></style>
